var chart1; // globally available
$(document).ready(function() {
	if ($("#generalWinRateTrendChart").length > 0) {
		drawGeneralWinRateTrendChart();
	}

	// ELO-Rose
	if ($("#eloRoseChart").length > 0) {
		drawEloRoseChart();

	}
	// Elo-History
	if ($("#eloHistoryChart").length > 0) {
		drawEloHistoryChart();
	}

});

function drawGeneralWinRateTrendChart() {
	$
			.ajax({
				url : 'ajax.php',
				type : "POST",
				dataType : 'json',
				data : {
					type : "matchDetails",
					mode : "getGeneralWinRateTrendData",
				},
				success : function(result) {
					l(result);
					if (result.data != null) {
						chart1 = new Highcharts.Chart({
							chart : {
								renderTo : 'generalWinRateTrendChart',
								type : 'spline',
								height : 224
							},
							title : {
								text : ''
							},
							yAxis : {
								min : Array.min(result.data),
								max : Array.max(result.data),
								title : {
									text : '',
									margin : 0
								},
								labels : {
									enabled : true,
									align : 'left',
									x : 0,
									y : -2
								},
								plotBands : [ { // Lose-area
									from : 0,
									to : 50,
									color : 'rgba(185, 74, 72, 0.1)',
									label : {
										text : 'more losses',
										style : {
											color : '#606060'
										}
									}
								}, { // Win-area
									from : 50,
									to : 100,
									color : 'rgba(70, 136, 71, 0.1)',
									label : {
										text : 'more wins',
										style : {
											color : '#606060'
										}
									}

								} ]
							},
							xAxis : {
								title : {
									text : ''
								},
								categories : result.xAxis,
								labels : {
									enabled : true
								}
							},
							tooltip : {
								formatter : function() {
									return '<b>' + this.series.name
											+ '</b><br/>Match #' + this.x
											+ ': ' + this.y + '%';
								}
							},
							legend : {
								align : "center",
								verticalAlign : 'top',
								enabled : true,
								itemMarginTop : 0,
								itemMarginBottom : 0,
								padding : 5,
							},

							series : [ {
								name : 'Win Rate Trend',
								data : result.data
							} ],
							credits : {
								enabled : false
							},
						});
					} else {
						html = '<div class="alert fade in"><p>You have to play at least one match to view this Chart!</p>'
							+	'<img src="img/profile/preview/previewWinRateTrend.png">'
							 + '</div>';
						$("#generalWinRateTrendChart").html(html);
						
						// Full Link ausblenden
						$("#generalWinRateTrendFullChartLink").hide();
						
						
					}

				}
			});
}

function drawEloHistoryChart() {

	matchModeID = $("#eloHistoryMMSelect option:selected").val();
	matchTypeID = $("#eloHistoryMTSelect option:selected").val();
	counts = $("#eloHistoryCountSelect option:selected").val();
	
	var steamID = getParameterByName("ID");
	
	$.ajax({
		url : 'ajax.php',
		type : "POST",
		dataType : 'json',
		data : {
			type : "matchDetails",
			mode : "getEloHistoryData",
			matchmode : matchModeID,
			matchtype : matchTypeID,
			count : counts, 
			ID : steamID
		},
		success : function(result) {
			l(result);
			if(result.data != null){
				chart = new Highcharts.Chart({
					chart : {
						renderTo : 'eloHistoryChart'
					},
					title : {
						text : ''
					},
					xAxis : {
						categories : result.xAxis,
						labels : {
							enabled : true
						}
					},
					yAxis : {
						title : {
							text : 'Elo'
						},
						plotBands : [ { // BRONZE
							from : 0,
							to : result.silverBorder,
							color : 'rgba(205, 133, 63, 0.1)',
							label : {
								text : 'Bronze Ranking',
								style : {
									color : '#606060'
								}
							}
						}, { // SILVER
							from : result.silverBorder,
							to : result.goldBorder,
							color : 'rgba(192, 192, 192, 0.1)',
							label : {
								text : 'Silver Ranking',
								style : {
									color : '#606060'
								}
							}

						}, { // GOLD
							from : result.goldBorder,
							to : result.diamondBorder,
							color : 'rgba(255, 215, 0, 0.1)',
							label : {
								text : 'Gold Ranking',
								style : {
									color : '#606060'
								}
							}

						}, { // DIAMOND
							from : result.diamondBorder,
							to : 99999,
							color : 'rgba(0, 136, 204, 0.1)',
							label : {
								text : 'Diamond Ranking',
								style : {
									color : '#606060'
								}
							}

						} ]
					},
					tooltip : {
						formatter : function() {
							return '<b>' + this.series.name + '</b><br/>Match #'
									+ this.x + ': ' + this.y + " Elo";
						}
					},

					legend : {
						enabled : false
					},
					series : [ {
						type : "line",
						name : "Elo-History for " + result.matchType + ": "
								+ result.matchMode,
						data : result.data
					// data : [ 1850, 1620, 1500, 1333, 1100, 1060, 900, 1570 ]
					} ],
					credits : {
						enabled : false
					},
				});
			}
			else{
				html = '<div class="alert fade in"><p>You have to play at least one match in this Matchmode to view this Chart!</p>'
					+ '<img src="img/profile/preview/previewEloHistory.png">'
					+ '</div>';
				$("#eloHistoryChart").html(html);
				
			}
			
		}
	});
}

function drawEloRoseChart() {
	
	var steamID = getParameterByName("ID");
	$
			.ajax({
				url : 'ajax.php',
				type : "POST",
				dataType : 'json',
				data : {
					type : "userElo",
					mode : "getEloRoseData",
					sID : steamID
				},
				success : function(result) {
					l(result);
					l($(result.keys).size());
					if ($(result.keys).size() > 2) {

						series = [ {
							type : "area",
							name : 'Current Elo',
							data : result.data,
							pointPlacement : 'on'
						} ];

						maxValue = Array.max(result.data);
						if (Array.max(result.data) > result.diamond[1]) {
							series[1] = {
								type : "line",
								name : 'Diamond Border',
								data : result.diamond,
								pointPlacement : 'on',
								visible : false
							};
							series[2] = {
								type : "line",
								name : 'Gold Border',
								data : result.gold,
								pointPlacement : 'on',
								visible : false
							};

							series[3] = {
								type : "line",
								name : 'Silver Border',
								data : result.silver,
								pointPlacement : 'on',
								visible : false
							};
							maxValue = Array.max(result.data);
						} else if (Array.max(result.data) >= result.gold[1]
								&& Array.max(result.data) < result.diamond[1]) {
							series[3] = {
								type : "line",
								name : 'Silver Border',
								data : result.silver,
								pointPlacement : 'on',
								visible : false
							};
							series[2] = {
								type : "line",
								name : 'Gold Border',
								data : result.gold,
								pointPlacement : 'on',
								visible : false
							};
							series[1] = {
								type : "line",
								name : 'Diamond Border',
								data : result.diamond,
								pointPlacement : 'on',
								visible : false
							};
							maxValue = result.diamond[1];
						} else if (Array.max(result.data) >= result.silver[1]
								&& Array.max(result.data) < result.gold[1]) {
							series[3] = {
								type : "line",
								name : 'Silver Border',
								data : result.silver,
								pointPlacement : 'on',
								visible : false
							};
							series[2] = {
								type : "line",
								name : 'Gold Border',
								data : result.gold,
								pointPlacement : 'on',
								visible : false
							};
							series[1] = {
								type : "line",
								name : 'Diamond Border',
								data : result.diamond,
								pointPlacement : 'on',
								visible : false
							};
							maxValue = result.gold[1];
						} else {
							series[3] = {
								type : "line",
								name : 'Silver Border',
								data : result.silver,
								pointPlacement : 'on',
								visible : false
							};
							maxValue = result.silver[1];
						}
						maxValue = Array.max(result.data);
						l(maxValue);
						chart1 = new Highcharts.Chart({
							chart : {
								renderTo : 'eloRoseChart',
								polar : true,
								type : 'area'
							},

							title : {
								text : '',
							// x: -80
							},

							xAxis : {
								categories : result.keys,
								tickmarkPlacement : 'on',
								lineWidth : 0,
							},
							colors : [ '#AA4643', '#08C', 'gold', 'silver',
									'#3D96AE', '#DB843D', '#92A8CD', '#A47D7C',
									'#B5CA92' ],
							yAxis : {
								gridLineInterpolation : 'polygon',
								lineWidth : 0,
								min : (Array.min(result.data)),
								max : maxValue,
//								plotBands : [ { // BRONZE
//									from : 0,
//									to : result.silver[0],
//									color : 'rgba(205, 133, 63, 0.1)',
//									label : {
//										text : ''
//									}
//								}, { // SILVER
//									from : result.silver[0],
//									to : result.gold[0],
//									color : 'rgba(192, 192, 192, 0.1)',
//									label : {
//										text : ''
//									}
//								}, { // GOLD
//									from : result.gold[0],
//									to : result.diamond[0],
//									color : 'rgba(255, 215, 0, 0.1)',
//									label : {
//										text : ''
//									}
//								}, { // DIAMOND
//									from : result.diamond[0],
//									to : 99999,
//									color : 'rgba(0, 136, 204, 0.1)',
//									label : {
//										text : ''
//									}
//								} ]
							},

							tooltip : {
								shared : true,
								valuePrefix : ''
							},

							legend : {
								align : "center",
								verticalAlign : 'top',
								enabled : true,
							},

							series : series,

							credits : {
								enabled : false
							},
						});
					} else {
						html = '<div class="alert fade in"><p>You have to play at least one match in more than 2 Matchmodes to view this Chart!</p>'
							+ '<img src="img/profile/preview/previewEloRose.png">'
							+ '</div>';
						$("#eloRoseChart").html(html);
					}

				}
			});
}
